<template>
    <view class="smart-container">
        <Header pageTitle="智能" />

        <view class="function-area">
            <view class="function-grid">
                <view
                    class="grid-item"
                    v-for="(item, index) in functionItems"
                    :key="index"
                    @click="navigateTo(item.url)">
                    <view class="icon-wrapper">
                        <image
                            class="icon-image"
                            :src="'/static/images/icons/' + item.icon + '.png'"></image>
                    </view>

                    <text class="text">{{ item.title }}</text>
                    <text class="sub-text">{{ item.subText }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Header from '@/components/Header/index.vue'

export default {
    components: {
        Header,
    },
    data() {
        return {
            title: '智能',
            functionItems: [
                {
                    title: '智能灌溉',
                    subText: '点击开启一键灌溉',
                    icon: 'faucet',
                    iconClass: 'blue',
                    url: '/pages/smart/irrigation/irrigation',
                },
                {
                    title: '土壤墒情',
                    subText: '点击开启一键查看',
                    icon: 'triangle-exclamation',
                    iconClass: 'warning',
                    url: '/pages/smart/soilMonitoring/soilMonitoring',
                },
                // {
                //     title: 'AI聊天',
                //     subText: '智能农业助手',
                //     icon: 'task',
                //     iconClass: 'green',
                //     url: '/pages/smart/aiChat/aiChat',
                // },
                {
                    title: "环境气象",
                    subText: "点击开启一键查看",
                    icon: "cloud-sun",
                    iconClass: "green",
                    url: "/pages/smart/weatherMonitoring/weatherMonitoring",
                },
                // {
                //     title: "农情监测",
                //     subText: "点击开启一键灌溉",
                //     icon: "temperature-high",
                //     iconClass: "green",
                //     url: "",
                // },

                {
                    title: "液位监测",
                    subText: "点击开启一键查看",
                    icon: "water",
                    iconClass: "blue",
                    url: "/pages/smart/liquidLevel/liquidLevel",
                },
                // {
                //     title: "安防监控",
                //     subText: "点击开启一键查看",
                //     icon: "video",
                //     iconClass: "purple",
                //     url: "",
                // },
            ],
        }
    },
    methods: {
        navigateTo(url) {
            console.log(url)
            uni.navigateTo({
                url: url,
            })
        },
    },
}
</script>

<style lang="scss">
.smart-container {
    min-height: 100vh;
    background-color: #f5f5f5;

    .function-area {
        padding: 20rpx;

        .function-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20rpx;

            .grid-item {
                background-color: #fff;
                border-radius: 16rpx;
                padding: 30rpx 20rpx;
                margin-bottom: 20rpx;
                display: flex;
                flex-direction: column;

                .icon-wrapper {
                    width: 56rpx;
                    height: 56rpx;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20rpx;
                    .icon-image {
                        width: 56rpx;
                        height: 56rpx;
                    }
                }

                .text {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #434343;
                    margin-bottom: 10rpx;
                }

                .sub-text {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #434343;
                }
            }
        }
    }
}
</style>
